<template>
  <div class="">
    <el-dialog title="修改状态" v-model="dialogVisible" :before-close="handleClose">
      <el-select clearable v-model="states" style="width:120px" placeholder="请选择状态" @change="stateChange" >
        <el-option v-for="item in repairState" :label="item.name" :value="item.id" />
      </el-select>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { ref, watch, reactive, onMounted } from "vue"
import { getrepairstate, getrepairstype } from "../service/repairs/repairslist";

const porps= defineProps({
  state: {
    type: Number,
    default: 0
  }
})
//添加页面显示
const states = ref(0)
const dialogVisible = ref(true)
const emit = defineEmits(['close', 'stateChange'])
const handleClose = () => {
  dialogVisible.value = false
  emit('close', [])
}
const stateChange = (e: any) => {
  console.log(e);
  
  emit('stateChange', e)
}

type RepairsType = {
  id: number,
  name: string
}

const repairsType = ref<RepairsType[]>([])
const repairState = ref<RepairsType[]>([])
const getTypeandState = async () => {
  const res = await Promise.all([getrepairstype(), getrepairstate()])
  repairsType.value = res[0].data.list
  repairState.value = res[1].data.list
  console.log(repairState, repairsType);
}

onMounted(()=>{
  getTypeandState()
  states.value=porps.state
})
</script>

<style scoped></style>
